<template>
  <div class="driver">
    <div class="form">
       <el-form ref="form" :model="form" :rules="rule"  label-width="auto"  :inline="true" size="mini">

            <el-form-item prop="dvrName" label="司机姓名：">
              <el-input v-model="form.dvrName" clearable></el-input>

            </el-form-item>
             <el-form-item prop="" label="">
      <el-button type="primary" size="mini" @click="search">查 询</el-button>
        </el-form-item>

    </el-form>
    </div>
    <div class="btn">
      <buttonName @clickEvent="clickEventDom"></buttonName>
      <!-- <el-button plain size="mini" type="primary" v-if="isAuth('add')" @click="addDriver">新增司机</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('edit')" @click="editDriver">编辑司机</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('del')" @click="delDriver">删除司机</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('reset')" @click="reset">重置密码</el-button> -->
    </div>
    <div class="name">司机列表</div>
    <div class="table" ref="inner">
       <el-table :data="tableData" border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
          >
         <el-table-column :index="indexMethod" type="index"  align="center" label=" " width="50"></el-table-column>
        <el-table-column  align="center" prop="zjcz" label="证件操作" show-overflow-tooltip width="180" sortable>
          <template slot-scope="scope">
            <!-- <el-link type="primary" @click="upload" :underline="false">证件上传</el-link>&nbsp;&nbsp; -->
            <el-link type="primary" @click="viewPic(scope.row)" :underline="false">证件查看</el-link>
          </template>
        </el-table-column>
        <!-- <el-table-column  align="left" prop="sjzt" label="司机状态" show-overflow-tooltip width="130" sortable></el-table-column> -->
        <el-table-column  align="left" prop="dvrName" label="司机姓名" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="right" prop="dvrCtctel" label="手机号码" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="right" prop="dvrIdcard" label="身份证号码" show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="right" prop="dvrLicense" label="驾驶证编号" show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="left" prop="dvrVehicleclass" label="准驾车型" show-overflow-tooltip width="120" sortable></el-table-column>
        <el-table-column  align="left" prop="dvrIssuingOrg" label="驾驶证发证机关 " show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="cneter" prop="dvrValidpfrom" label="驾驶证有效日期开始" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="center" prop="dvrValidpto" label="驾驶证有效期结束 " show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="right" prop="dvrQualiyCer" label="从业资格证号" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="dvrHaddress" label="家庭住址" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="dvrPermanent" label="常驻地址" show-overflow-tooltip width="180" sortable></el-table-column>
        <!-- <el-table-column  align="left" prop="dvrAuditCode" label="审核操作人  " show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="center" prop="dvrAuditTime" label="审核操作时间  " show-overflow-tooltip width="180" sortable></el-table-column> -->
        <!-- <el-table-column  align="left" prop="dvrPaywayValue" label="支付方式" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="left" prop="dvrReceiptacco" label="支付信息" show-overflow-tooltip width="130" sortable></el-table-column> -->
        <el-table-column  align="center" prop="dvrDgsqlfcation" label="危险品资质" show-overflow-tooltip width="120" sortable>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.dvrDgsqlfcation" true-label="Y" false-label="N" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column  align="center" prop="dvrHvqlfcation" label="重大件资质" show-overflow-tooltip width="120" sortable>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.dvrHvqlfcation" true-label="Y" false-label="N" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column  align="left" prop="dvrRemark" label="备注" show-overflow-tooltip width="120" sortable></el-table-column>
       </el-table>
    </div>
    <div class="pages">
       <el-pagination
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    </div>
    <!-- 对话框 新增 编辑司机 -->
     <el-dialog
    :title="name"
    :visible.sync="openDialog"
    v-if="openDialog"
    v-el-drag-dialog
    :before-close="close"
    :close-on-click-modal="false"
     >
     <el-form :model="dialogForm" size="mini" :rules="dialogRule"  ref="dialogForm" label-width="auto">
       <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrName" label="司机姓名：">
              <el-input v-model="dialogForm.dvrName" style="width:95%" maxlength="15" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrCtctel" label="手机号码：" >
              <el-input v-model="dialogForm.dvrCtctel" maxlength="11" style="width:95%" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrLicense" label="驾驶证编号：">
              <el-input v-model="dialogForm.dvrLicense" maxlength="12" style="width:95%"  clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrVehicleclass" label="准驾车型：" >
              <el-select v-model="dialogForm.dvrVehicleclass" style="width:95%" clearable :disabled="see">
                <el-option v-for="(item,index) in carType" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrIssuingOrg" label="驾驶证发证机关：">
              <el-input v-model="dialogForm.dvrIssuingOrg" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrQualiyCer" label="从业资格证号：" >
              <el-input v-model="dialogForm.dvrQualiyCer" style="width:95%" maxlength="15" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrValidpfrom" label="驾驶证有效期开始：">
              <el-date-picker v-model="dialogForm.dvrValidpfrom" style="width:95%" @change="startTimeChange"   clearable :disabled="see" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrValidpto" label="驾驶证有效期结束：" >
              <el-date-picker v-model="dialogForm.dvrValidpto" style="width:95%"   @change="endTimeChange" clearable :disabled="see" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrPayway" label="支付方式：">
              <el-select v-model="dialogForm.dvrPayway" style="width:95%" @change="PORTCD" clearable :disabled="see">
               <el-option v-for="(item,index) in Payway" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrReceiptacco" label="支付信息：	" >
              <el-input v-model="dialogForm.dvrReceiptacco" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrNtvpalce" label="籍贯：	">
              <el-input v-model="dialogForm.dvrNtvpalce" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrIdcard" label="身份证号码：">
              <!-- <el-col :span="12"> -->
              <el-input v-model="dialogForm.dvrIdcard" style="width:95%" maxlength="18" clearable :disabled="see"></el-input>
              <!-- </el-col> -->
            </el-form-item>
            <!-- <el-form-item prop="dvrBankcode" label="银行代码：" >
              <el-select v-model="dialogForm.dvrBankcode" style="width:95%" clearable :disabled="see">
                <el-option v-for="(item,index) in bank" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="dvrHvqlfcation" label="重大件资质：">
              <el-radio-group v-model="dialogForm.dvrHvqlfcation"   :disabled="see">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dvrDgsqlfcation" label="危险品资质：" >
              <el-radio-group v-model="dialogForm.dvrDgsqlfcation" :disabled="see">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
         <!-- <el-row :gutter="24">
            <el-form-item prop="dvrIdcard" label="身份证号码：">
              <el-col :span="24">
              <el-input v-model="dialogForm.dvrIdcard" style="width:100%" maxlength="18" clearable :disabled="see"></el-input>
              </el-col>
            </el-form-item>
          </el-row> -->
          <el-row :gutter="24">
            <el-form-item prop="dvrHaddress" label="家庭住址：" >
              <el-col :span="24">
              <el-input v-model="dialogForm.dvrHaddress" style="width:98%" clearable maxlength="32" :disabled="see"></el-input>
              </el-col>
            </el-form-item>
        </el-row>
        <el-row :gutter="24">
            <el-form-item prop="dvrPermanent" label="常驻地址：">
              <el-col :span="24">
               <el-input  v-model="dialogForm.dvrPermanent" style="width:98%"  clearable maxlength="32" :disabled="see"></el-input>
                 </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item prop="dvrRemark" label="备注：" >
               <el-col :span="24">
              <el-input type="textarea" v-model="dialogForm.dvrRemark" :rows="2" maxlength="200" :disabled="see" style="width:98%"></el-input>
               </el-col>
            </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <!-- <el-col :span="5" style="margin-left:145px">
            <div class="step2-upload">
              <el-upload
                action = ''
               :data="{step: 'one',code:'tx'}"
                :http-request="uploadImageA"
                :before-upload="beforeUploadA"
                :show-file-list="false"
                class="avatar-uploader">
                <img v-if="imageUrl.one" :src="imgUrl.one1" class="avatar">
                <i v-else class="el-icon-plus uploader-icon"></i>
              </el-upload>
              <p>上传头像(必填)</p>
           </div>
          </el-col> -->
             <!-- <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false">
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog> -->
          <el-col :span="5" style="margin-left:150px">
              <div class="step2-upload">
                <el-upload
                  action = ''
                  :data="{step: 'two',code:'sfzz'}"
                  :http-request="uploadImageA"
                  :before-upload="beforeUploadA"
                  :show-file-list="false"
                  class="avatar-uploader">
                  <img v-if="imageUrl.two" :src="imgUrl.two1" class="avatar">
                  <i v-else class="el-icon-plus uploader-icon"></i>
                </el-upload>
              <p>上传身份证正面(必填)</p>
           </div>
          </el-col>
          <el-col :span="5">
              <div class="step2-upload">
                <el-upload
                  action = ''
                  :data="{step: 'three',code:'sfzb'}"
                  :http-request="uploadImageA"
                  :before-upload="beforeUploadA"
                  :show-file-list="false"
                  class="avatar-uploader">
                  <img v-if="imageUrl.three" :src="imgUrl.three1" class="avatar">
                  <i v-else class="el-icon-plus uploader-icon"></i>
                </el-upload>
              <p>上传身份证反面(必填)</p>
            </div>
          </el-col>
          <el-col :span="5">
              <div class="step2-upload">
                <el-upload
                  action = ''
                  :data="{step: 'four',code:'jsz'}"
                  :http-request="uploadImageA"
                  :before-upload="beforeUploadA"
                  :show-file-list="false"
                  class="avatar-uploader">
                  <img v-if="imageUrl.four" :src="imgUrl.four1" class="avatar">
                  <i v-else class="el-icon-plus uploader-icon"></i>
                </el-upload>
              <p>上传驾驶证</p>
            </div>
          </el-col>
        </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" style="margin-top:10px" >
      <el-button  @click="close" size="mini">关闭</el-button>
      <el-button type="primary" @click="save" v-if="!see" size="mini">保存</el-button>
      </div>
     </el-dialog>
    <!-- 对话框 证件上传 查看 -->
    <el-dialog
      :title="title"
      :width="widthImg"
      :visible.sync="openUpload"
      v-if="openUpload"
      v-el-drag-dialog
      :before-close="closeUpload"
      :close-on-click-modal="false"
      append-to-body
      >
       <div class="box" v-if="!pic">
         <div class="selectItem">
           <el-select v-model="issuse">
             <el-option  v-for="(item,index) in list" :key="index" :value="item.code" :label="item.name"></el-option>
           </el-select>
         </div>
         <div class="upload">
            <el-upload
              action=""
              :http-request="uploadImage"
              :before-upload="beforeUpload"
              :show-file-list="false"
              class="upload-demo">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
            </el-upload>
         </div>
       </div>
       <div class="pic" v-else>
         <h1>头像：</h1><br/><img :src='dvrHead' alt="未上传"><br/>
       <h1>身份证正面：</h1><br/><img :src='dvrSfzpositive' alt="未上传"><br/>
       <h1>身份证反面：</h1><br/><img :src='dvrSfzreverse' alt="未上传"><br/>
       <h1>驾驶证：</h1><br/><img :src='dvrLicenurl' alt="未上传"></div>
      <div slot="footer" class="dialog-footer" >
      <el-button  @click="closeUpload" size="mini">关闭</el-button>
      </div>
     </el-dialog>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import isAuth from '@/mixins/buttonAuth'
import resizeMixin from '@/mixins/resize'
import {getDriverModelList,addDriverModelList,zffs,bankCode,carType,editDriverModelList,
  delDriverModelList,resetPass,uploadDriverImg,UploadFile} from '@/request/api'
import buttonName from '@/components/buttonName/button-name.vue'
export default {
  name:'router.driver',
  mixins:[paginationMixin,resizeMixin,isAuth],
  data(){
    return{
      //图片上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl: {
        one: '', // 头像 url
        two: '', // 身份证正面 url
        three: '', // 身份证反面 url
        four:'' // 驾驶证 url
      },
      form:{
        dvrName:''
      },
      dvrHead:'',//头像图片路径
      dvrLicenurl:'',//驾驶证照图片路径
      dvrSfzpositive:'',//身份证正面图片路径
      dvrSfzreverse:'',//身份证反面图片路径
      widthImg:'30%',
      maxHeight:-1,
      tableData:[],
      currentData:{},
      fileList:[],
      issuse:'',
      uploadData:'',
      list:[{code:'tx',name:'头像'},{code:'sfzz',name:'身份证正面'},{code:'sfzb',name:'身份证反面'},{code:'jsz',name:'驾驶证'}],
      // 司机对话框
      name:'',
      openDialog:false,
      dialogForm:{},
      dialogRule:{  //验证规则
        dvrName:[{required:true,message:'请输入司机姓名',trigger:'blur'}],
        dvrCtctel:[{required:true,pattern:/^\d{11}$/,message:'请输入11位手机号',trigger:'blur'}],
         dvrIdcard:[{required:true,message:'请输入18位身份证号码',trigger:'blur'},{
          pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message:'请输入18位身份证号码',trigger:'blur'
        }],
        // dvrLicense:[{required:true,message:'请输入驾驶证编号',trigger:'blur'}],
        // dvrVehicleclass:[{required:true,message:'请输入准驾车型',trigger:'blur'}],
        // dvrIssuingOrg:[{required:true,message:'请输入驾驶证发证机关',trigger:'blur'}],
        // dvrValidpfrom:[{required:true,message:'请输入驾驶证有效期开始',trigger:'blur'}],
        // dvrPayway:[{required:false,message:'请选择支付方式',trigger:'blur'}],
        // dvrReceiptacco:[{required:false,message:'请输入支付信息',trigger:'blur'}],
        // dvrValidpto:[{required:true,message:'请输入驾驶证有效期结束',trigger:'blur'}],
        // dvrNtvpalce:[{required:false,message:'请输入籍贯',trigger:'blur'}],
        // dvrBankcode:[{required:false,message:'请输入银行代码',trigger:'blur'}],
        // dvrQualiyCer:[{required:true,message:'请输入从业资格证号',trigger:'blur'}],
        // dvrHvqlfcation:[{required:false,message:'请输入',trigger:'blur'}],
        // dvrDgsqlfcation:[{required:false,message:'请输入',trigger:'blur'}],
        // dvrHaddress:[{required:false,message:'请输入',trigger:'blur'}],
        // dvrPermanent:[{required:false,message:'请输入',trigger:'blur'}],
        // dvrRemark:[{required:false,message:'请输入',trigger:'blur'}]
      },
      edit:false,// 编辑模式
      see:false,//查看模式
      Payway:[],
      carType:[],
      bank:[],
      //上传、查看图片对话框
      openUpload:false,
      pic:false,
      title:'上传证件',
    }
  },
  created(){
    this.refreshList()
    //准驾车型
    carType().then(res=>{
      if(res.success==='1'){
        this.carType=res.data
      }
    })
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
    //支付方式
    zffs().then(res=>{
      if(res.success==='1'){
        this.Payway=res.data

      }
    })
    //银行代码
    bankCode().then(res=>{
      if(res.success==='1'){
        this.bank=res.data

      }
    })
    //准驾车型
    carType().then(res=>{
      if(res.success==='1'){
        this.carType=res.data
      }
    })
  },
   computed: {
    // 上传预览图片 由于后台返回的地址是相对地址 需要转换为绝对地址
    imgUrl () {
      return {
        one1: api.IMAGE_PREFIX + this.imageUrl.one,
        two1:api.IMAGE_PREFIX + this.imageUrl.two,
        three1:api.IMAGE_PREFIX + this.imageUrl.three,
        four1:api.IMAGE_PREFIX + this.imageUrl.four
      }
    }
  },
  methods:{
     //调取父组件方法
    clickEventDom(item){
      if(item.mdlCode === 'add'){
        this.addDriver()
      }else if(item.mdlCode === 'edit'){
        this.editDriver()
      }else if(item.mdlCode === 'del'){
        this.delDriver()
      }else if(item.mdlCode === 'reset'){
        this.reset()
      }
    },

     // 图片上传之前的检查
    beforeUploadA(file) {
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在 ' + this.size + ' M以内',
          showClose: true
        })
        return false
      }
    },
      // 上传图片
    uploadImageA ({ data, file }) {
      this.issuse = data.code
      uploadDriverImg(file,this.issuse,this.currentData.uuid).then(res=>{
          if(res.success=='1'){
              this.$message({
                  message: '图片上传成功！',
                  type: 'success'
                });
                this.imageUrl[data.step] =  res.msg
            }
          })
    },

    determineTime(nextDate, previousDate, time) { //时间区间问题
      if (previousDate) {
        previousDate = new Date(previousDate)
        previousDate = new Date(previousDate.getFullYear(), previousDate.getMonth(), previousDate.getDate())
        var falg = (time.getTime() < previousDate)
        if (nextDate) {
          nextDate = new Date(nextDate)
          nextDate = new Date(nextDate.getFullYear(), nextDate.getMonth(), nextDate.getDate())
          if (time.getTime() < previousDate || time.getTime() > nextDate) {
            return true
          } else {
            return false
          }
        }
        return falg
      } else if (nextDate) {
        nextDate = new Date(nextDate)
        nextDate = new Date(nextDate.getFullYear(), nextDate.getMonth(), nextDate.getDate())
        if (time.getTime() > nextDate) {
          return true
        } else {
          return false
        }
      }
    },
    startTimeChange(){
      let vbsStartime
      let vbsEndtime
      vbsStartime = new Date(Date.parse(this.dialogForm.dvrValidpfrom))
      vbsEndtime = new Date(Date.parse(this.dialogForm.dvrValidpto))
      if(vbsStartime>vbsEndtime){
        this.dialogForm.dvrValidpfrom = ''
        this.$message.error({
          showClose: true,
          message: '驾驶证有效期开始时间不能大于驾驶证有效期结束时间！',
          type: 'warning',
          duration:8000
        })
      }

    },
    endTimeChange(){
      let vbsStartime
      let vbsEndtime
      vbsStartime = new Date(Date.parse(this.dialogForm.dvrValidpfrom))
      vbsEndtime = new Date(Date.parse(this.dialogForm.dvrValidpto))
      if(vbsStartime>vbsEndtime){
        this.dialogForm.dvrValidpto = ''
        this.$message.error({
          showClose: true,
          message: '驾驶证有效期结束时间不能小于驾驶证有效期开始时间！',
          type: 'warning',
          duration:8000
        })
      }
    },
    //查询
    search(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.refreshList()
        }
      })
    },
    getList(currentPage, pageSize, updateTotal){
      getDriverModelList({
        dvrName:this.form.dvrName,
        PageIndex: currentPage.toString(),
        PageSize: pageSize.toString()
      }).then(response => {
        this.tableData = response.data
        this.contextTable=[]
        // this.$message({
        //   type:'success',
        //   message:'刷新成功',
        //   showClose:true
        // })
        updateTotal(Number(response.total))
      })
    },
    // 上传图片
    uploadImage ({ file}) {
      uploadDriverImg(file,this.issuse,this.currentData.uuid).then(res => {
        if(res.success=='1'){
          this.refreshList(),
          this.$alert('图片上传成功！', '提示', {
            confirmButtonText: '确定'
          }).then(()=>{
            this.uploadClose()
          })
        }
      })
      this.openUpload=false
    },
    // 图片上传之前的检查
    beforeUpload(file) {
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在5M以内',
          showClose: true
        })
        return false
      }
    },
    //证件查看
    viewPic(row){
      this.dvrHead = api.IMAGE_PREFIX+row.dvrHead
      this.dvrSfzpositive = api.IMAGE_PREFIX+row.dvrSfzpositive
      this.dvrSfzreverse = api.IMAGE_PREFIX+row.dvrSfzreverse
      this.dvrLicenurl = api.IMAGE_PREFIX+row.dvrLicenurl
      this.openUpload=true
      this.title='查看证件'
      this.pic=true
      this.widthImg = "40%"
    },
    //证件上传
    upload(){
      this.openUpload=true
      this.title='上传证件'
      this.pic=false
    },
    //双击查看啊详情
    dbrowClick(row){
      this.openDialog=true
      this.see=true
      this.edit=true
      this.dialogForm=Object.assign({},row)
    },
    //单击行
    rowClick(row){
      this.currentData=Object.assign({},row)
    },
    //重置密码
    reset(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要重置密码的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      resetPass({uuid:this.currentData.uuid}).then(res=>{
        if(res.success==='1'){
          this.$alert('重置成功，密码已重置为Abc12345！','提示',{
            confirmButtonText:'确定'
          })
          this.close()
        }
      })
    },
    //删除司机
    delDriver(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要删除的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.$confirm('您确定要删除该数据吗？','提示',{
        confirmButtonText:'确定'
      }).then(()=>{
        delDriverModelList({uuid:this.currentData.uuid}).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'删除成功',
              showClose:true
            })
            this.close()
          }
        })
      })

    },
    //提交保存
    save(){
      this.$refs.dialogForm.validate(valid=>{
        if(valid){
          // if (!this.imageUrl.one) {
          //   this.showError('请上传头像')
          //   return
          // }

          //这里去掉必填项 -- 20200930 车辆批量导入需求连带
          // if (!this.imageUrl.two) {
          //   this.showError('请上传身份证正面')
          //   return
          // }
          //
          // if (!this.imageUrl.three) {
          //   this.showError('请上传身份证反面')
          //   return
          // }
          // if (!this.imageUrl.four) {
          //   this.showError('请上传驾驶证')
          //   return
          // }
          this.dialogForm.dvrHead = this.imageUrl.one
          this.dialogForm.dvrSfzpositive = this.imageUrl.two
          this.dialogForm.dvrSfzreverse = this.imageUrl.three
          this.dialogForm.dvrLicenurl = this.imageUrl.four
          if(this.edit){
            //编辑
            editDriverModelList(this.dialogForm).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'编辑数据成功',
                  showClose:true
                })
                this.close()
              }
            })
          }else{
            //新增
            // let  box = Object.assign(this.dialogForm,{})
            addDriverModelList(this.dialogForm).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'新增数据成功',
                  showClose:true
                })
                this.close()
              }
            })
          }
        }
      })
    },
    showError(message){
      this.$message({
        type: 'error',
        message: message,
        showClose: true
      })
    },
    //编辑司机
    editDriver(){
      //1.先判断是否已审核 2.执行编辑
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要编辑的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.openDialog=true
      this.see=false
      this.edit=true
      this.name='编辑司机信息'
      this.dialogForm=Object.assign({},this.currentData)

      this.imageUrl.one = this.dialogForm.dvrHead
      this.imageUrl.two = this.dialogForm.dvrSfzpositive
      this.imageUrl.three = this.dialogForm.dvrSfzreverse
      this.imageUrl.four = this.dialogForm.dvrLicenurl
    },
    //新增司机
    addDriver(){
      this.openDialog=true
      this.see=false
      this.edit=false
      this.name='新增司机信息'
      this.dialogForm={
        dvrName:'',
        dvrCtctel:'',
        dvrLicense:'',
        dvrVehicleclass:'',
        dvrIssuingOrg:'',
        dvrQualiyCer:'',
        dvrValidpfrom:'',
        dvrValidpto:'',
        dvrPayway:'',
        dvrReceiptacco:'',
        dvrNtvpalce:'',
        dvrBankcode:'',
        dvrHvqlfcation:'N',
        dvrDgsqlfcation:'N',
        dvrIdcard:'',
        dvrHaddress:'',
        dvrPermanent:'',
        dvrRemark:'',
        dvrLicenurl:'',//驾驶
        dvrSfzpositive:'',//身份证
        dvrSfzreverse:'',
        isaudit:'N',//审核
      }
    },
    //关闭上传对话框
    closeUpload(){
      this.openUpload=false
    },
    //关闭司机对话框
    close(){
      this.imageUrl.one = ''
      this.imageUrl.two = ''
      this.imageUrl.three = ''
      this.imageUrl.four = ''
      this.openDialog=false
      this.currentData={}
      this.refreshList()
    }
  },
  components: {
    buttonName
  },
}
</script>
<style lang="scss" scoped>
.step2-upload{
  width: 100%;
  height: 100px;
  background-color: #efefef;
  margin-top: 10px;
  position:relative;
    p{
      position: absolute;
      top:120px;
      left:22px;
    }
    i{
      position: absolute;
      top: 42%;
      left: 42%;
    }
    img{
      width: 100%;
      height:100px;
    }
    .el-upload-list__item-delete{
      position: absolute;
      right: 97px;
      top: 43px;
      font-size: 20px;
      color: #606266;
    }
}
.pic{
  height: 500px;
  overflow: auto;
   img{
     width: 100%;
  }
}
.driver{
  width:100%;
  height:100%;
  padding:15px 15px 12px;
  display:flex;
  flex-direction:column;
  .form{
    height:30px;
  }
  .btn{
    height:50px;
    line-height:50px;
  }
   .name{
    font-size:16px;
    line-height:20px;
    font-weight:500;
  }
  .table{
    flex:1;
  }
  .pages{
    height:30px;
  }

  .box{  //上传对话框
  // display:flex;
  // flex-direction: row;
  // justify-content: space-evenly;
  overflow:hidden;
  height: 200px;
    .selectItem{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
    .upload{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
  }
}

</style>
